<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3_transition_3d</title>
</head>
<style>
.item>div{
	width: 300px;
	line-height: 100px;
	color:#eee;
	font-size: 50px;
	text-align: center;
	margin: 20px;
	background: #444;
}
.tran1{
	transition: all 4s ease;
}
.tran2{
	transition: all 4s ease-in;
}
.tran3{
	transition: all 4s ease-out;
}
.tran4{
	transition: all 4s ease-in-out;
}
.tran5{
	transition: all 4s linear;
}
.item:hover .tran1{
	width: 600px;
}
.item:hover .tran2{
	width: 600px;
}
.item:hover .tran3{
	width: 600px;
}
.item:hover .tran4{
	width: 600px;
}
.item:hover .tran5{
	width: 600px;
}
.epr{
	perspective: 800px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}
.blk{
	width: 400px;
	line-height: 400px;
	margin: 100px;
	font-size: 200PX;
	color: BLUE;
	text-align: center;


	background: rgba(12,96,21,.8);
}
input{
	line-height: inherit;
	vertical-align: middle;
}
</style>
<body>
	<!-- transition:属性平滑过渡 过渡属性名称 过渡时间
property duration all,多行或者逗号隔开
过渡模式 ease(default)  linear ease-in ease-out ease-in-out


	 -->

	<div class="item" style="display: none;">
		<div class="tran1">ease</div>
		<div class="tran2">ease-in</div>
		<div class="tran3">ease-out</div>
		<div class="tran4">ease-in-out</div>
		<div class="tran5">linear</div>
	</div>
	<input type="range" min="-360" max="360" value="0" onchange="ratate()">rotatex : <span>0</span> 
	<br><input type="range" min="-360" max="360" value="0" onchange="ratate()">rotatey : <span>0</span> 
	<br>		<input type="range" min="-360" max="360" value="0" onchange="ratate()">rotatez : <span>0</span> 
	<!-- 创建3d场景 -->
	<!-- perspective:perspective-origin; 
		transform属性：translate 位移 px； rotate 旋转 deg；

	-->
		<div class="epr">
			<div class="blk" id="blk">聂</div>
		</div>
		<script>
			function ratate(){
				var x=document.getElementsByTagName('input')[0].value;
				var y=document.getElementsByTagName('input')[1].value;
				var z=document.getElementsByTagName('input')[2].value;
				document.getElementsByTagName('span')[0].innerHTML=x;
				document.getElementsByTagName('span')[1].innerHTML=y;
				document.getElementsByTagName('span')[2].innerHTML=z;
				document.getElementById('blk').style.transform='rotateX('+x+'deg) rotateY('+y+'deg) rotateZ('+z+'deg)';
			}
		</script>
</body>
</html>